const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const VueServerPlugin = require('vue-server-renderer/server-plugin')
const webpack = require('webpack')
const path = require('path')
// Vue Loader 的配置和其它的 loader 不太一样。
// 除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    target: 'node',
    entry: {
        app: path.join(__dirname, '/src/server_entry.js')
    },
    output: {
        // 一定要
        libraryTarget: 'commonjs2',
        filename: 'server-entry.js',
        path: path.join(__dirname, '/server-build')
    },
    devtool: 'source-map',
    // 这些不需要打到服务端的包里面, node可以require加载一个单独的文件, 不设置打包会再打包出一份这些包的代码, 可能会出问题
    externals: Object.keys(require('./package.json').dependencies),
    module: {
        // 这里不能有style-loader,里面有css插入dom里面的操作,它有dom操作的代码在里面, node没有dom操作的执行环境,会报错
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    use: [
                        // {
                        //     loader: 'style-loader',
                        // },
                        {
                            loader: 'css-loader'
                        },
                        // 设置支持到哪些浏览器
                        // package.json里面可以写browserslist
                        // 也可以创建.browserslistrc文件
                        {
                            loader: 'postcss-loader',
                            options: {
                                // 表明接下来的插件是给postcss用的
                                ident: 'postcss',
                                plugins: [
                                    require('autoprefixer')()
                                ]
                            }
                        }
                    ]
                })
            },
        ] 
    },
    plugins: [
        new VueLoaderPlugin(),
        new ExtractTextWebpackPlugin('styles.[contentHash:8].css'),
        // webpack是属于Node的程序，Node环境下的环境变量，webpack可以配置可以灵活读取
        // 但index.js里面是属于webpack要构建的产物，如果里面也想读取环境变量，可以通过DefinePlugin定一下，index里面就可以取到了
        new webpack.DefinePlugin({
            // 官方建议这么写
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
            'process.env.VUE_ENV': '"server"'
        }),
        // 输出的是个json文件
        new VueServerPlugin()
        // 可以指定输出的文件名， 默认为vue-ssr-server-bundle.json
        // new VueServerPlugin({filename: 'xxx'})
    ]
}